<include file="Public/mheader" />
<style>
body{
	overflow: hidden;
}
.background{
	width:100%;
	height:100%;
	background:url(__PUBLIC__/__MODULE__/img/index-none.jpg)  no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	overflow:hidden;
}
.bottom-div{
	position:fixed;
	bottom:40px;
	width:100%;
	text-align:center;
	margin:0;
}
.start,.loading{
	padding:10px;
	height:100%;
	width:100%;
	position: absolute;
	top:100%;
}
.start-page{
	width:100%;
	height:100%;
	background:#fff;
	text-align:center;
	font-size:16px;
	padding:50px;
	background: url(__PUBLIC__/__MODULE__/img/start_bg.png) no-repeat center center;
	background-size: 100% 100%;
}
.line_btm {
	border-bottom: 1px solid #aea797;
}
.answer{
	top:0;
	color: #fff;
	height:100%;
}

.game_top {
	height:90px;
	border-bottom: 1px solid #aa7749;
	background: url(__PUBLIC__/__MODULE__/img/game_bg_top.jpg) no-repeat;
	background-size: 1005 100%;
	position: relative;
}
.game_top_t {
	width: 42.6666666666666%;
	margin: 0px auto 0;
	position: relative;
	top:10px;
	height: 37px;
	background: url(__PUBLIC__/__MODULE__/img/title_bg.png) no-repeat;
	background-size: 100% 100%;
	text-align: center;
	color: #fbd768;
	font-size: 2.2rem;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
#pass_num{color: #b70000}
.pass_num {
	color: #b70000;
	background: rgba(121, 68, 27, 0.3);
	border-radius: 3px;
	width: 44px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin:14px 0 0 10px;
}
.pass_num>span {
	color: #29221d;
}
.socre_panel {
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -30px;
	width: 60px;height: 50px;
	background: #79441b;
	text-align: center;
	z-index: 10;

}
#cur_score{width: 55px;height: 30px;background: #fff;margin:2px auto 0;color: #79441b;line-height: 30px;font-weight: 600;font-size: 2rem} 
.socre_panel .text{position: relative;line-height: 20px;}
.socre_panel .text:before,
.socre_panel .text:after{
	content: '';
	width: 3px;height: 3px;background: #79441b;
	display: block;position: absolute;top:7px;
}
.socre_panel .text:before{left: -3px;}
.socre_panel .text:after{right: -3px;}

.time_count_panel {
	width: 85px;
	height: 30px;
	line-height: 30px;
	background: rgba(121, 68, 27, 0.3);
	margin:14px 10px 0 0;
	border-radius: 3px;
	text-align: center;

}
.time_count_panel>span {
	padding: 0px 2px;
	height: 22px;
	line-height: 22px;
	margin-top: 4px;
	color: #fff;
	background: #000;
	border-radius: 4px;
	display: inline-block;
}
.time_count_panel>span:nth-child(3){
	background: none;
}
.ques_panel{width: 100%;background: url(__PUBLIC__/__MODULE__/img/game_bg_center.jpg) no-repeat;background-size: 100% 100%;position: relative;}
.ques_type01{padding-bottom: 6%;}
.ques_panel .flag{width: 25px;height: 40px;background: url(__PUBLIC__/__MODULE__/img/flag.png) no-repeat;background-size: 100% 100%;margin: 6% 2% 0 4%;}
.ques_type02{}
.ques_type02>img{display: block;width:100%;}
.ques_type02 .ques_text{
	position: absolute;bottom: 0;left: 0;margin:0;
	padding:4px 10px;
	text-align: center;
	color: #fff;
	width: 100%;background: rgba(0,0,0,0.7);
}
.ques_text{width: 82.93333333333333%;color: #3c3836;font-size: 1.8rem;line-height: 1.32;margin-top:6%;}


.answers_panel{margin:12.1875% auto 0;width: 280px;position: relative;}
.answers_item{width: 100%;height: auto;line-height: 35px;position: relative;margin-bottom: 6.25%;}
.answers_item>img{position: absolute;}
.as_normal_bg,
.as_active_bg{
	width: 100%;height: 100%;left: 0;top: 0;
}
.right_mark{width: 50px;height: 44px;right: -20px;top:-4px;position: absolute;}
.wrong_mark{width: 42px;height:44px;right: -20px;top:-4px;position: absolute;}
.as_text{width: 100%;/*height: 100%;*/height:auto;/*position: absolute;*/top:0;left: 0;font-size: 1.6rem;text-indent: 10px;background:url(__PUBLIC__/__MODULE__/img/anwser_bg.png);background-size:100% 100%;}


.clear:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden
}
.answer-page{
	background: url(__PUBLIC__/__MODULE__/img/game_bg_btm.jpg);background-size: 100% auto;
	height:100%;
}

</style>
<div class="background">
	<div class="answer">
		<div class="answer-page">
			<div class="game_top">
				<p class="game_top_t">{:C("POINT")[$point]}任务</p>
				<div class="clear">
					<p class="pass_num fl"><span id="pass_num">1</span><span id="total_pass">/5</span></p>
					<!--div class="socre_panel">
						<p id="cur_score">0</p>
						<p class="text">得分</p>
					</div-->
				</div>
			</div>
			<foreach name="answer" item="vo" >
			<div class="interactive_panel" style="display:none;">
				<!-- 文字题目 -->
				<div class="ques_panel ques_type01 clear">
					<span class="flag fl"></span>
					<p class="fl ques_text">{$vo.title}</p>
				</div>
				<!-- 图文题目 -->
				<div class="ques_panel ques_type02 clear hidden">
					<img class="ques_img" src="about:blank" alt="">
					<p class="fl ques_text">{$vo.title}</p>
				</div>
				<!-- 答案 -->
				<div class="answers_panel">
					<div class="answers_item" style="opacity: 1;">
						<!--img class="as_normal_bg" src="__PUBLIC__/__MODULE__/img/anwser_bg.png" alt=""-->
						<eq name="vo.submit" value="1">
							<eq name="vo.isok" value="1">
							<img src="http://mat1.gtimg.com/news/2015/1945/res/images/right_tip.png" class="right_mark" alt="">
							<else/>
							<img src="http://mat1.gtimg.com/news/2015/1945/res/images/wrong_tip.png" class="wrong_mark" alt="">
							</eq>
						</eq>
						<p data-position="1" class="as_text">A.<span>{$vo.answer1}</span></p>
					</div>
					<div class="answers_item" style="opacity: 1;">
						<!--img class="as_normal_bg" src="__PUBLIC__/__MODULE__/img/anwser_bg.png" alt=""-->
						<eq name="vo.submit" value="2">
							<eq name="vo.isok" value="1">
							<img src="http://mat1.gtimg.com/news/2015/1945/res/images/right_tip.png" class="right_mark" alt="">
							<else/>
							<img src="http://mat1.gtimg.com/news/2015/1945/res/images/wrong_tip.png" class="wrong_mark" alt="">
							</eq>
						</eq>
						<p data-position="2" class="as_text">B.<span>{$vo.answer2}</span></p>
					</div>
					<div class="answers_item" style="opacity: 1;">
						<!--img class="as_normal_bg" src="__PUBLIC__/__MODULE__/img/anwser_bg.png" alt=""-->
						<eq name="vo.submit" value="3">
							<eq name="vo.isok" value="1">
							<img src="http://mat1.gtimg.com/news/2015/1945/res/images/right_tip.png" class="right_mark" alt="">
							<else/>
							<img src="http://mat1.gtimg.com/news/2015/1945/res/images/wrong_tip.png" class="wrong_mark" alt="">
							</eq>
						</eq>
						<p data-position="3" class="as_text">C.<span>{$vo.answer3}</span></p>
					</div>
					<div class="answers_item" style="opacity: 1;">
						<!--img class="as_normal_bg" src="__PUBLIC__/__MODULE__/img/anwser_bg.png" alt=""-->
						<p data-position="4" class="as_text">下一题</p>
					</div>
				</div>
			</div>
			</foreach>
		</div>
	</div>
</div>
<div class="hidden">
	<form method="post" class="form-signin" action="">
		
	</form>
</div>
<div class='loading' style='display:none;top:0;z-index:999999;background:#000000;opacity: 0.5;'><div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div></div>
<script>
$('a[data-href]').on('click',function(){
	location.href=$(this).data('href');
});
$(function(){
	var answerurl = "{$reload_url}";
	$(".interactive_panel:eq(0)").show();
	$("p[data-position=4]").on("click",function(){
		var ans = $(this).parents(".interactive_panel");
		if(!ans.next().next().length){
			ans.next().find("p[data-position=4]").html("继续答题");
		}
		if(!ans.next().length){
			location.href=answerurl;
			return;
		}
		ans.hide().next().show();
	});
});
</script>
<include file="public/footer" />